<template>
    <header>
        <h1>echarts可视化</h1>
    </header>
    <section class="container">
        <section class="itemLeft">
            <itemPage>
                <i1></i1>
            </itemPage>
            <itemPage>
                <i2></i2>
            </itemPage>
        </section>
        <section class="itemCenter">
            
            <imap></imap>
        </section>
        <section class="itemRight">
            <itemPage>
                <i3></i3>
            </itemPage>
            <itemPage>
                <i4></i4>
            </itemPage>
        </section>
    </section>
</template>

<script>
import itemPage from "../components/itemPage.vue"

import i1 from "@/components/i1.vue";
import i2 from "@/components/i2.vue";
import i3 from "@/components/i3.vue";
import i4 from "@/components/i4.vue";
import imap from '@/components/map.vue';
import { inject } from "vue";

export default {
    components:{
    itemPage,
    i1,
    i2,
    i3,
    i4,
    imap
},
    setup(){
    }
}
</script>


<style lang="less" scoped>

header{
    height: 1rem;
    width: 100%;
    background-color: rgba(0,0,255,.2);
    h1{
        font-size: .375rem;
        text-align: center;
        color: #fff;
        line-height: 1rem;
    }
}
.container{
    min-width: 1200px;
    max-width: 2560px;
    margin: 0 auto;
    padding: .125rem .125rem 0;
    display: flex;
    .itemRight,.itemLeft{
        flex: 3;
    }
    .itemCenter{
        flex: 5;
        height: 10.5rem;
        border: 1px solid blue;
        padding: .125rem;
        margin: .25rem;

    }
}
</style>>

